import 'dart:math' as math;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../../../main.dart';
import '../../fintness_app_theme.dart';

class FakeKCalLeft extends StatefulWidget {
  final AnimationController animationController;
  final Animation animation;

  const FakeKCalLeft({Key key, this.animationController, this.animation})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return FakeKCLeft();
  }
}

class FakeKCLeft extends State<FakeKCalLeft> {
  int kcal = 1593;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: widget.animationController,
        builder: (BuildContext context, Widget child) {
          return Stack(
            overflow: Overflow.visible,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(8),
                child: Container(
                  width: 100,
                  height: 100,
                  alignment: Align().alignment,
                  decoration: BoxDecoration(
                    color: FintnessAppTheme.white,
                    borderRadius: BorderRadius.all(
                      Radius.circular(100.0),
                    ),
                    border: new Border.all(
                        width: 4,
                        color:
                            FintnessAppTheme.nearlyDarkBlue.withOpacity(0.2)),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text(
                        '${(kcal * widget.animation.value).toInt()}',
                        style: TextStyle(
                            fontFamily: FintnessAppTheme.fontName,
                            fontWeight: FontWeight.normal,
                            fontSize: 24,
                            letterSpacing: 0.0,
                            color: FintnessAppTheme.nearlyDarkBlue),
                      ),
                      Text("Kcal left",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: FintnessAppTheme.fontName,
                            fontWeight: FontWeight.bold,
                            fontSize: 12,
                            letterSpacing: 0.0,
                            color: FintnessAppTheme.grey.withOpacity(0.5),
                          ))
                    ],
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(4),
                child: CustomPaint(
                  painter: ArcProgressView(colors: [
                    HexColor("#8A98E8"),
                    FintnessAppTheme.nearlyDarkBlue,
                  ], angle: 140 + (360 - 140) * (1.0 - widget.animation.value)),
                  child: SizedBox(
                    width: 108,
                    height: 108,
                  ),
                ),
              )
            ],
          );
        });
  }
}

class ArcProgressView extends CustomPainter {
  final double angle;
  final List<Color> colors;

  ArcProgressView({this.colors, this.angle});

  @override
  void paint(Canvas canvas, Size size) {
    List<Color> colorsList = List<Color>();
    if (colors != null) {
      colorsList = colors;
    } else {
      colorsList.addAll([Colors.white, Colors.white]);
    }

    final shdowPaint = new Paint()
      ..color = Colors.black.withOpacity(0.4)
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 14;
    final shdowPaintCenter = new Offset(size.width / 2, size.height / 2);
    final shdowPaintRadius =
        math.min(size.width / 2, size.height / 2) - (14 / 2);
    canvas.drawArc(
        new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
        degreeToRadians(278),
        degreeToRadians(360 - (365 - angle)),
        false,
        shdowPaint);

    shdowPaint.color = Colors.grey.withOpacity(0.3);
    shdowPaint.strokeWidth = 16;
    canvas.drawArc(
        new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
        degreeToRadians(278),
        degreeToRadians(360 - (365 - angle)),
        false,
        shdowPaint);

    shdowPaint.color = Colors.grey.withOpacity(0.2);
    shdowPaint.strokeWidth = 20;
    canvas.drawArc(
        new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
        degreeToRadians(278),
        degreeToRadians(360 - (365 - angle)),
        false,
        shdowPaint);

    shdowPaint.color = Colors.grey.withOpacity(0.1);
    shdowPaint.strokeWidth = 22;
    canvas.drawArc(
        new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
        degreeToRadians(278),
        degreeToRadians(360 - (365 - angle)),
        false,
        shdowPaint);

    final rect = new Rect.fromLTWH(0.0, 0.0, size.width, size.width);
    final gradient = new SweepGradient(
      startAngle: degreeToRadians(268),
      endAngle: degreeToRadians(268.0 + 358),
      tileMode: TileMode.repeated,
      colors: colorsList,
    );

    final paint = new Paint()
      ..shader = gradient.createShader(rect)
      ..strokeCap = StrokeCap.round // StrokeCap.round is not recommended.
      ..style = PaintingStyle.stroke
      ..strokeWidth = 14;
    final center = new Offset(size.width / 2, size.height / 2);
    final radius = math.min(size.width / 2, size.height / 2) - (14 / 2);

    canvas.drawArc(
        new Rect.fromCircle(center: center, radius: radius),
        degreeToRadians(278),
        degreeToRadians(360 - (365 - angle)),
        false,
        paint);

    final gradient1 = new SweepGradient(
      tileMode: TileMode.repeated,
      colors: [Colors.white, Colors.white],
    );

    var cPaint = new Paint();
    cPaint..shader = gradient1.createShader(rect);
    cPaint..color = Colors.white;
    cPaint..strokeWidth = 14 / 2;
    final centerToCircle = size.width / 2;
    canvas.translate(centerToCircle, centerToCircle);
    canvas.rotate(degreeToRadians(angle + 2));
    canvas.translate(0.0, -centerToCircle + 14 / 2);
    canvas.drawCircle(new Offset(0, 0), 14 / 5, cPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }

  double degreeToRadians(double degree) {
    var redian = (math.pi / 180) * degree;
    return redian;
  }
}
